import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';

import { List, InputItem, Radio, Toast, Flex,Icon,WingBlank,Button,ImagePicker,TextareaItem,Checkbox} from 'antd-mobile';
import { createForm } from 'rc-form';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import MyScroll from '../../components/MyScroll/MyScroll';
import {applyAfterSale, radio_class, title, prompt} from "./applyAfterSale.less";
import xiangjisvg from "../../assets/img/xiangji.svg";
import xing from '../../assets/svg/xing.svg';
import xing2 from '../../assets/svg/xing2.svg';
import noselect from '../../assets/img/noselect.svg';

const RadioItem = Radio.RadioItem;

const {Item} =List;
const AgreeItem = Checkbox.AgreeItem;
class ApplyAfterSale extends Component {
    constructor(props) {
        super(props);
        this.state={
            arr:["换货/维修","退货退款","仅退款"],
            arr1:["无发票","有发票"],
            arr2:["原支付返还","退款至账户余额"],
            leixing: 0,
            hasFaPiao:0,
            tuikuan:1,
            Num:1,
            isDisplay1:false,
            files:[],
            i:this.props.match.params.Data,

            // 是否收货
            receipt: 0,
        };
        this.imgURL = [];
    }


    componentDidMount(){
        this.props.dispatch({type: "orderList/OrderDetailEFF", obj: this.props.match.params.data})
    }

    prv=()=>{
        if (this.state.Num == 1) return false;
        this.setState({
            Num:this.state.Num-1
        });
        if(this.state.Num==1){
            this.setState({
                isDisplay1:true,
            })
        }else{
            this.setState({
                isDisplay1:false,
            })
        }
    }
    next=()=>{
        const {orderDetail={},orderGoodsEntityList=[]} = this.props.orderList;

        if(this.state.Num>=orderGoodsEntityList[this.state.i].goodsNum){
            Toast.info("超过商品数量!",1)
        }else{
            this.setState({
                Num:this.state.Num+1,
                isDisplay1:false,
            });

        }

    }

    submit=()=>{
        console.log("applyAfterSale--->>>submit");
        const {orderDetail = {}, orderGoodsEntityList=[]} = this.props.orderList;
        const {count} = this.props.form.getFieldsValue();
        const {leixing,tuikuan,Num,hasFaPiao,files} = this.state;

        const curGoods = orderGoodsEntityList[this.state.i];
        // refundAmount   goodsReturnNum        goodsBarterNum
        console.warn(curGoods.refundAmount, curGoods.goodsReturnNum, curGoods.goodsBarterNum, '提交前判断。。。。。。');
        if (+curGoods.refundAmount || +curGoods.goodsReturnNum || +curGoods.goodsBarterNum) return Toast.fail('您已提交申请，请不要重复提交', 1.5);

        if(leixing==0){
            this.props.dispatch({type:"orderList/barterEFF",obj:{
                    id:orderDetail.orderId,
                    buyerMessage:count,
                    orderGoodsId:orderGoodsEntityList[this.state.i].recId,
                    goodsNum:Num,
                    invoiceProof:hasFaPiao,
                    imgURL: this.imgURL.join(",")
                }}).then((result)=>{
                    if(result.code==200){
                        Toast.info(result.msg,1,()=>{
                            this.props.dispatch(routerRedux.replace({
                                pathname:`/returnSuccess/${[result.ret.id, result.ret.time, result.ret.type]}`
                            }))
                        });
                    }else{
                        Toast.fail(result.msg);
                    }
            })
        }else if(leixing==1){
            this.props.dispatch({type:"orderList/returnEFF",obj:{
                    id:orderDetail.orderId,
                    buyerMessage:count,
                    orderGoodsId:orderGoodsEntityList[this.state.i].recId,
                    goodsNum:Num,
                    invoiceProof:hasFaPiao,
                    refundMode:tuikuan,
                    imgURL: this.imgURL.join(",")
                }}).then((result)=>{
                if(result.code==200){
                    Toast.info(result.msg,1,()=>{
                        this.props.dispatch(routerRedux.replace({
                            pathname:`/returnSuccess/${[result.ret.id, result.ret.time, result.ret.type]}`
                            // pathname:`/afterSale`
                        }))
                    });
                }else{
                    Toast.fail(result.msg);
                }
            })
        }else if(leixing==2){
            this.props.dispatch({type:"orderList/refundEFF",obj:{
                    id:orderDetail.orderId,
                    buyerMessage:count,
                    goodsNum:Num,
                    refundAmount:orderGoodsEntityList[this.state.i].goodsPayPrice*Num,
                    orderGoodsId:orderGoodsEntityList[this.state.i].recId,
                    invoiceProof:hasFaPiao,
                    refundMode:tuikuan,
                    imgURL: this.imgURL.join(",")
                }}).then((result)=>{
                if(result.code==200){
                    Toast.info(result.msg,1,()=>{
                        this.props.dispatch(routerRedux.replace({
                            pathname:`/returnSuccess/${[result.ret.id, result.ret.time, result.ret.type]}`
                            // pathname:`/afterSale`
                        }))
                    });
                }else{
                    Toast.fail(result.msg);
                }
            })
        }

    }
    onChange = (files, type, index) => {
        if (files.length >9) return !Toast.fail("上传图片数量超过限制!", 2);
        this.setState({
            files,
        });


        if (type == "add") this.props.dispatch({type:"orderList/upLoadEFF",obj:{upfile: files[files.length - 1].file}}).then(res => this.imgURL.replace(res.ret.url))
        else if ( type == "remove") this.imgURL.splice(index, 1)
    }

    render() {
        const { getFieldProps, getFieldError } = this.props.form;
        const {orderDetail={},orderGoodsEntityList=[]} = this.props.orderList;
        const {goodsImage=""} = orderGoodsEntityList;
        const {arr,arr1,leixing,Num,isDisplay1,hasFaPiao,files,tuikuan,arr2} = this.state;
        function siblings(elm) {
            var a = [];
            var p = elm.parentNode.children;
            for(var i =0,pl= p.length;i<pl;i++) {
                if(p[i] !== elm) a.push(p[i]);
            }
            return a;
        }


        console.log(orderGoodsEntityList, "订单详情。。。。。");
        return (
            <Flex style={{
                height:"100%"
            }} direction="column"
                  className={applyAfterSale}
            >
                <NavTopBar title="申请售后服务" dispatch={this.props.dispatch}/>
                <MyScroll style={{width:"100%"}}>
                    {orderGoodsEntityList[this.state.i]!==undefined&&<div style={{backgroundColor:"#fff",width:"100%"}}>
                                <WingBlank >
                                    <Flex style={{padding:".3rem 0",width:"100%"}}>
                                        <NoLazyImg src={orderGoodsEntityList[this.state.i].goodsImage} style={{width:"2rem",height:"2rem",marginRight:".2rem"}}/>
                                        {/*<img src={"http://testbbc.leimingtech.com"+orderGoodsEntityList.goodsImage} style={{width:"2rem",height:"2rem",marginRight:".2rem"}} alt=""/>*/}
                                        <div style={{width:"100%"}}>
                                            <div style={{margin:".2rem 0 .6rem"}}>{orderGoodsEntityList[this.state.i].goodsName}</div>
                                            <Flex justify="between">
                                                <p style={{color:"#ff0036",marginRight:"2.5rem"}}>¥<span style={{fontSize:".3rem"}}>{orderGoodsEntityList[this.state.i].goodsPrice}</span></p>
                                                <p>x{orderGoodsEntityList[this.state.i].goodsNum}</p>
                                            </Flex>
                                        </div>
                                    </Flex>
                                </WingBlank>
                            </div>
                    }


                <div style={{backgroundColor:"#fff",width:"100%",marginTop:".3rem",paddingBottom:".3rem"}}>
                    <WingBlank>
                        <p>服务类型</p>
                        <Flex>
                            {
                                arr.map((item,i)=>{
                                    if (item == '换货/维修' && orderDetail.orderState < 40) return false;
                                    return <div key={i} style={i == this.state.leixing ? {backgroundColor: "#ff0036", color: "#fff"} : {}} className="fuwuleixing" onClick={(e)=>{
                                        e.target.style.backgroundColor="#ff0036";
                                        e.target.style.color="#fff";
                                        this.setState({
                                           leixing:i,
                                           Num:1
                                        });
                                        for(let i=0;i<siblings(e.target).length;i++){
                                            siblings(e.target)[i].style.backgroundColor="";
                                            siblings(e.target)[i].style.color="";
                                        }
                                    }}>{item}</div>
                                })
                            }
                        </Flex>
                    </WingBlank>
                </div>

                {/* <div style={{backgroundColor:"#fff",width:"100%",marginTop:".3rem",paddingBottom:".3rem"}}>
                    <WingBlank>
                        <p>是否已收到货</p>
                        <p className={ prompt }>选择已收货会将订单状态修改为已收货,再进行售后申请</p>

                        <div className={ radius_class }>
                            <p><Icon type=''{...{type: this.state.receipt ? '' : ''}} />已收货</p>
                            <p><Icon type='' />未收货</p>
                        </div>
                    </WingBlank>
                </div> */}

                <div style={{backgroundColor:"#fff",width:"100%",marginTop:".3rem",paddingBottom:".2rem"}}>
                    <WingBlank>
                        {leixing==2? <div>
                            <div>
                                <p>退款金额</p>
                                <p style={{color:"#ff0036",marginRight:"2.5rem"}}>¥<span style={{fontSize:".3rem"}}>{orderGoodsEntityList[this.state.i].goodsPayPrice * Num}</span></p>
                            </div>
                            <div>
                                <p>退款方式</p>
                                <Flex>
                                    <div className="fuwuleixing" id="yuanzhifu" onClick={(e)=>{
                                        document.getElementById("yuanzhifu").classList.add("fuwuleixing", "has");
                                        document.getElementById("zhanghuyue").classList.remove("has");
                                        this.setState({
                                            tuikuan:0
                                        });
                                    }}>原支付返还</div>
                                    <div className="fuwuleixing  has" id="zhanghuyue" onClick={(e)=>{
                                        document.getElementById("zhanghuyue").classList.add("fuwuleixing", "has");
                                        document.getElementById("yuanzhifu").classList.remove("has");
                                        this.setState({
                                            tuikuan:1
                                        });
                                    }}>退款至账户余额</div>
                                </Flex>
                            </div>
                            <div>
                                <p>申请数量</p>
                                <Flex>
                                    <Button inline disabled={isDisplay1 || Num == 1} size="small" style={{fontSize:".4rem"}} onClick={this.prv}>-</Button>
                                    <span style={{margin:"0 .3rem"}}>{Num}</span>
                                    <Button inline disabled={Num == orderGoodsEntityList[this.state.i].goodsNum} size="small" onClick={this.next}>+</Button>
                                </Flex>
                            </div>
                        </div>:leixing==1?
                                <div>
                                    <div>
                                        <p>退款金额</p>
                                        <p style={{color:"#ff0036",marginRight:"2.5rem"}}>¥<span style={{fontSize:".3rem"}}>{orderGoodsEntityList[this.state.i].goodsPayPrice*Num}</span></p>
                                    </div>
                                    <div>
                                        <p>退款方式</p>
                                        <Flex>
                                            <div className="fuwuleixing" id="yuanzhifu" onClick={(e)=>{
                                                document.getElementById("yuanzhifu").classList.add("fuwuleixing", "has");
                                                document.getElementById("zhanghuyue").classList.remove("has");
                                                this.setState({
                                                    tuikuan:0
                                                });
                                            }}>原支付返还</div>
                                            <div className="fuwuleixing  has" id="zhanghuyue" onClick={(e)=>{
                                                document.getElementById("zhanghuyue").classList.add("fuwuleixing", "has");
                                                document.getElementById("yuanzhifu").classList.remove("has");
                                                this.setState({
                                                    tuikuan:1
                                                });
                                            }}>退款至账户余额</div>
                                        </Flex>
                                    </div>
                                    <div>
                                        <p>申请数量</p>
                                        <Flex>
                                            <Button inline disabled={isDisplay1 || Num == 1} size="small" style={{fontSize:".4rem"}} onClick={this.prv}>-</Button>
                                            <span style={{margin:"0 .3rem"}}>{Num}</span>
                                            <Button inline disabled={Num == orderGoodsEntityList[this.state.i].goodsNum} size="small" onClick={this.next}>+</Button>
                                        </Flex>
                                    </div>
                                </div>:<div>
                                    <p>申请数量</p>
                                    <Flex>
                                        <Button inline disabled={isDisplay1 || Num == 1} size="small" style={{fontSize:".4rem"}} onClick={this.prv}>-</Button>
                                        <span style={{margin:"0 .3rem"}}>{Num}</span>
                                        <Button inline disabled={Num == orderGoodsEntityList[this.state.i].goodsNum} size="small" onClick={this.next}>+</Button>
                                    </Flex>
                                </div>
                            }
                        </WingBlank>
                    </div>
                    <div style={{backgroundColor:"#fff",width:"100%",marginTop:".3rem",paddingBottom:".3rem"}}>
                        <WingBlank>
                            <p>服务类型</p>
                            <Flex>
                                <div className="fuwuleixing has" id="noFaPiao" onClick={(e)=>{
                                    document.getElementById("noFaPiao").classList.add("fuwuleixing", "has");
                                    document.getElementById("hasfapiao").classList.remove("has");
                                    this.setState({
                                        hasFaPiao:0
                                    });
                                }}>无发票</div>
                                <div className="fuwuleixing" id="hasfapiao" onClick={(e)=>{
                                    document.getElementById("hasfapiao").classList.add("fuwuleixing", "has");
                                    document.getElementById("noFaPiao").classList.remove("has");
                                    this.setState({
                                        hasFaPiao:1
                                    });
                                }}>有发票</div>
                            </Flex>
                        </WingBlank>
                    </div>
                    <div style={{backgroundColor:"#fff",width:"100%",marginTop:".3rem",paddingBottom:".3rem"}}>
                        <WingBlank>
                            <p>问题描述</p>
                            <TextareaItem
                                {...getFieldProps('count')}
                                placeholder="输入问题描述"
                                clear
                                rows={3}
                                count={500}
                            />
                        </WingBlank>
                    </div>
                    <div style={{backgroundColor:"#fff",width:"100%",marginTop:".3rem",paddingBottom:"1.5rem"}}>
                        <WingBlank>
                            <p>上传照片</p>
                            <ImagePicker
                                files={files}
                                onChange={this.onChange}
                                selectable={files.length < 3}
                            />
                            <p>最多上传3张,每张不超过5M,支持:JPG、BMP、PNG</p>
                        </WingBlank>
                    </div>
                </MyScroll>

                <Button style={{width:"100%",position:"fixed",bottom:"0",backgroundColor:"#ff0036",color:"#fff"}} onClick={this.submit}>提交</Button>
            </Flex>
        );
    }
}

export default connect(({ orderList  }) => ({ orderList  }))(createForm()(ApplyAfterSale));
